<template>
	<view class="order-detail">
		<view class="list-item">
			<view class="list-item-title">
				<view class="title-left">
					{{datalist.cinemaName}}
				</view>

			</view>
			<view class="list-item-content">
				<view class="detail-box">
					<image :src="datalist.product_pic" mode=""></image>
				</view>
				<view class="list-item-main">
					<view class="list-item-main-title">
						{{datalist.titlearray[0]}}
					</view>
					<view class="list-item-main-date text-t">
						{{datalist.titlearray[1]}}
					</view>
					<view class="list-item-main-date text-t">
						{{datalist.titlearray[2]}}
						<text class="num-r">{{datalist.num}}张</text>
						{{datalist.titlearray[3]}}{{datalist.titlearray[4]}}
					</view>
					<view class="list-item-main-seat text-t">
						{{datalist.hallName}} {{datalist.seats}}
					</view>

				</view>
			</view>
		</view>
		<view class="list-item">
			<view class="title">
				订单详情
			</view>
			<view class="order-num" v-if="datalist.coupon_money !== null && datalist.coupon_money !== undefined">
				<text class="text">优惠券数量：</text>{{datalist.couponlist.length}}
			</view>

			<view class="order-num">
				<text class="text">订单总价：</text>{{datalist.showPrice}}
			</view>
			<view class="order-num" v-if="datalist.coupon_money !== null && datalist.coupon_money !== undefined">
				<text class="text">优惠金额：</text>{{datalist.coupon_money}}
			</view>
			<view class="order-num">
				<text class="text">实付金额：</text>{{datalist.totalprice}}
			</view>
			<view class="order-num">
				<text class="text">订单编号：</text>{{datalist.order_sn}}
			</view>
			<view class="order-num">
				<text class="text">下单时间：</text>{{datalist.createtimetxt}}
			</view>
		</view>
		<view class="orderimage">
			<image :src="datalist.orderimage" class="responsive-image"  mode="widthFix" ></image>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				datalist: [],
				title: '',
				showTime: '',
				language: '',
				format: ''
			}
		},
		onLoad(opt) {
			if (opt) {
				this.opt = opt
				this.getData()
			}
		},
		methods: {
			getData() {
				app.get('film/orderdetail', {
					order_id: this.opt.order_id
				}, (res) => {
					this.datalist = res.data
					this.title = this.datalist.title.split(' ')[0];
					this.showTime = this.datalist.title.split(' ')[1];
					this.language = this.datalist.title.split(' ')[2];
					this.format = this.datalist.title.split(' ')[3];

				});
			}
		}
	}
</script>

<style>
	.order-detail {
		padding: 20rpx;

	}

	.list-item {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.list-item-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.title-right {
		color: #ef155b;
	}

	.detail-box {
		width: 140rpx;
		height: 180rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.title {
		color: #333;
		font-weight: 700;
	}

	.detail-box image {
		width: 100%;
		height: 100%;
	}

	.list-item-content {
		display: flex;
	}

	.list-item-main {
		margin-left: 20rpx;
		flex: 1;
	}

	.list-item-main-title {
		font-weight: bold;
	}

	.order-num {
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	.text {
		color: #888;
	}

	.text-t {
		margin-top: 10rpx;
	}

	.num-r {
		margin: 0 6rpx;
	}

	.orderimage {
		width: 100%;
		height: auto;
	}
	.responsive-image{
		width: 100%;
		height: 100%;
	}
	.text-item{
		padding: 0 6rpx;
	}
</style>